<template>
  <commonTable
    ref="commonTableRef"
    rowKey="bookId"
    :query="{ isPay: 0 }"
    :columns="roomTypeTableState.columns"
    :rules="[]"
    name="checkInRecord"
    :addon="true"
    :hideEdit="true"
    :create="false"
  >
    <template #addon="{ record }">
      <a-button type="link" @click="handleClick(record)">查看</a-button>
      <a-button type="link" @click="handleProduction(record)">消费 </a-button>
      <a-button type="link" @click="handleGetIn(record)">结账 </a-button>
    </template>
  </commonTable>
  <a-modal
    width="850px"
    title="房费计算"
    okText="结账"
    v-model:visible="modalGetInVisible"
    @ok="pay"
  >
    <commonTable
      :query="payModalState.query"
      :params="payModalState.query"
      :create="false"
      :hideDelete="true"
      :hideEdit="true"
      rowKey="payId"
      name="pay"
      :rules="payModalState.rules"
      :columns="payModalState.columns"
    ></commonTable>
    <a-descriptions bordered>
      <a-descriptions-item label="房间号">
        {{ thisRecord.book.roomPackage.room.roomNo }}</a-descriptions-item
      >
      <a-descriptions-item label="入住天数">
        {{ thisRecord.book.roomBook.length + "天" }}</a-descriptions-item
      >
      <a-descriptions-item label="入住人数">
        {{ thisRecord.checkInInfo.length + "人" }}</a-descriptions-item
      >
      <a-descriptions-item label="动态折扣">
        {{
          thisRecord.book.roomPackage.discount.discountPrice + "%"
        }}</a-descriptions-item
      >
      <a-descriptions-item label="vip折扣">
        {{
          thisRecord.book.user.userVip
            ? thisRecord.book.user.userVip.vip.vipDiscount + "%"
            : "无vip等级"
        }}</a-descriptions-item
      >
      <a-descriptions-item label="押金金额">
        {{
          thisRecord.book.roomPackage.deposit.depositPrice + "元"
        }}</a-descriptions-item
      >
      <a-descriptions-item label="套餐价格(每天)"
        >{{ thisRecord.book.roomPackage.roomPackagePrice + "元" }}
      </a-descriptions-item>
      <a-descriptions-item label="优惠前价格">{{
        payPrice
      }}</a-descriptions-item>
      <a-descriptions-item label="折后总价">{{
        realPayPrice
      }}</a-descriptions-item>
    </a-descriptions>
  </a-modal>
  <a-modal :title="modalState.title" v-model:visible="modalState.visible">
    <commonTable
      :query="roomBookTableState.query"
      rowKey="checkInInfoId"
      name="checkInInfo"
      :hideEdit="true"
      :hideDelete="true"
      :create="false"
      :columns="roomBookTableState.columns"
    ></commonTable>
  </a-modal>
  <a-modal
    title="消费"
    v-model:visible="payModalState.visible"
    width="850px"
    @ok="handleGetInOk"
    :afterClose="handleGetInOk"
  >
    <commonTable
      :query="payModalState.query"
      :params="payModalState.query"
      rowKey="payId"
      name="pay"
      :rules="payModalState.rules"
      :columns="payModalState.columns"
    >
      <template #form="{ record }">
        <a-form-item label="商品名" name="productionId">
          <h-select
            name="production"
            v-model:value="record.productionId"
          ></h-select>
        </a-form-item>
        <a-form-item label="数量" name="amount">
          <a-input type="number" v-model:value.number="record.amount"></a-input>
        </a-form-item>
      </template>
    </commonTable>
  </a-modal>
</template>

<script setup>
import {
  computed,
  getCurrentInstance,
  nextTick,
  onMounted,
  reactive,
  ref,
  watch,
} from "vue";
import commonTable from "../../utils/CommonTable";
import HSelect from "@/components/HSelect";
import { useStore } from "vuex";
import { checkInRecord } from "@/api";
import { Modal } from "ant-design-vue";
const store = useStore();
const getInFormRef = ref();
const commonTableRef = ref();
const payModalState = reactive({
  visible: false,
  query: {},
  columns: [
    {
      title: "序号",
      dataIndex: "payId",
    },
    {
      title: "商品名",
      dataIndex: "production.productionName",
    },
    {
      title: "商品价格",
      dataIndex: "production.productionPrice",
    },
    {
      title: "数量",
      dataIndex: "amount",
    },
    {
      title: "消费时间",
      dataIndex: "createdAt",
    },
    {
      title: "操作",
      slots: { customRender: "action" },
    },
  ],
  rules: {
    productionId: [{ required: true, message: "必填" }],
    amount: [{ required: true, min: 1, message: "必须大于1", type: "number" }],
  },
});
const modalState = reactive({
  visible: false,
  title: "入住人详情",
});
const handleClick = (record) => {
  roomBookTableState.query = { checkInRecordId: record.checkInRecordId };
  modalState.visible = true;
};
const roomBookTableState = reactive({
  columns: [
    {
      title: "姓名",
      dataIndex: "name",
    },
    {
      title: "身份证号",
      dataIndex: "idCard",
    },
  ],
  query: {},
});

const roomTypeTableState = reactive({
  dataSource: [],
  columns: [
    {
      title: "序号",
      dataIndex: "checkInRecordId",
    },
    {
      title: "预订用户",
      dataIndex: "userId",
    },
    {
      title: "房间号",
      dataIndex: "book.roomPackage.room.roomNo",
    },
    {
      title: "房间类型",
      dataIndex: "book.roomPackage.room.roomType.roomTypeName",
    },
    {
      title: "楼层",
      dataIndex: "book.roomPackage.room.floor.floorName",
    },
    {
      title: "入住人数",
      dataIndex: "checkInInfo.length",
    },
    {
      title: "入住天数",
      dataIndex: "book.roomBook.length",
    },
    // {
    //   title: "操作",
    //   slots: { customRender: "action" },
    // },
  ],
});
const getInFormState = reactive({
  list: [
    {
      name: "",
      idCard: "",
    },
  ],
});
const modalGetInVisible = ref(false);
const thisRecord = ref();
const payPrice = computed(() => {
  if (thisRecord.value.pay) {
    let price = 0;
    thisRecord.value.pay.map((r) => {
      price += r.amount * r.production.productionPrice;
    });
    return price;
  } else {
    return 0;
  }
});
const realPayPrice = computed(() => {
  const discount =
    thisRecord.value.book.roomPackage.discount.discountPrice / 100;
  const vipDiscount =
    (thisRecord.value.book.user.userVip
      ? thisRecord.value.book.user.userVip.vip.vipDiscount
      : 100) / 100;
  return (payPrice.value * discount * vipDiscount).toFixed(2);
});
const handleGetIn = async (record) => {
  thisRecord.value = record;
  payModalState.query = { checkInRecordId: record.checkInRecordId };
  modalGetInVisible.value = true;
  await nextTick();
};

const handleGetInOk = (record) => {
  commonTableRef.value.getList();
  payModalState.visible = false;
  modalGetInVisible.value = false;
};
const pay = async () => {
  await checkInRecord.update({
    ...thisRecord.value,
    isPay: 1,
    realPayPrice: realPayPrice.value,
  });
  handleGetInOk();
};
const handleProduction = (record) => {
  payModalState.query = { checkInRecordId: record.checkInRecordId };
  payModalState.visible = true;
};
</script>

<style scoped></style>
